<template>
  <guat-page-layout title="公告管理">
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '新增公告',
            internal: $config.$button.PLR,
            permission: $permission.NOTICE_ADD,
            onClick: handleAdd,
          },
        ]"
      />
    </template>
    <guat-notice-table />
    <guat-new-notice-modal :title="isAdd ? '创建新公告' : '编辑公告'">
      <guat-new-notice-form />
    </guat-new-notice-modal>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createTableColumns } from "./table-config";
import { newNoticeFormConfig } from "./form-config";

let isAdd = ref(true);

const [GuatNewNoticeModal, { setModalVisible }] = useModal();
const [GuatNewNoticeForm] = useForm(newNoticeFormConfig);
const [GuatNoticeTable, { setTableData }] = useTable(
  createTableColumns({
    chk: handleCheck,
    hide: handleHide,
    del: handleDelete,
  })
);
const { info, error } = useModalNotice();
const { success } = useMessage();

function handleAdd() {
  isAdd.value = true;
  setModalVisible(true);
}

function handleCheck() {
  isAdd.value = false;
  setModalVisible(true);
}

function handleHide() {
  info({
    title: "隐藏公告确认",
    content: "请确认是否要隐藏当前公告？",
    onOk: () => success("公告隐藏成功"),
  });
}

function handleDelete() {
  error({
    title: "删除公告确认",
    content: "请确认是否要删除当前公告？",
    onOk: () => success("公告删除成功"),
  });
}

onMounted(() => {
  setTableData([
    {
      noticeTitle: "2023-2024学年第七周周赛报名通知",
      noticeType: "通知",
      noticePostTime: "2024-04-20 19:56:33",
      noticeEndTime: "2024-04-24 00:00:00",
      noticeStatus: "投放中",
    },
    {
      noticeTitle: "2023-2024学年第周六周赛报名通知",
      noticeType: "通知",
      noticePostTime: "2024-04-13 19:56:33",
      noticeEndTime: "2024-04-27 00:00:00",
      noticeStatus: "已过期",
    },
  ]);
});
</script>

<style scoped></style>
